import {Form, Modal, Row, Col, Input, Select, Cascader} from 'antd';
import {useEffect} from 'react';
import {connect} from 'umi';
import styles from '../styles.less';

const DataForm = (props) => {
  const {dispatch, submitting, postList, roleList, deptTree} = props;
  const {dataForm, setDataForm, tablePayload, setTablePayload} = props.data;
  const [form] = Form.useForm();

  /* 部门、岗位、角色 */
  useEffect(() => {
    dispatch({
      type: 'SystemCommon/getDepts',
      payload: {},
    });
    dispatch({
      type: 'SystemCommon/getPosts',
      payload: {},
    });
    dispatch({
      type: 'SystemCommon/getRoles',
      payload: {},
    });
  }, [dispatch]);

  /* 初始化表单数据 */
  useEffect(() => {
    if (!dataForm || !dataForm.data) {
      form.setFieldsValue({status: 1, username: undefined, password: undefined});
    }
    if (dataForm && dataForm.data) {
      form.setFieldsValue({
        ...dataForm.data,
        roleIds: dataForm.data?.roleIds ?? undefined,
        postIds: dataForm.data?.postIds ?? undefined,
        deptIds: dataForm.data?.deptIds ?? undefined,
      });
    }
  }, [dataForm, form]);

  /* 确定操作 */
  function onOk() {
    form.validateFields().then(values => {
      if (submitting) {
        return;
      }
      let keys = Object.keys(values);
      keys.forEach(d => {
        values[d] = values[d] === null ? undefined : values[d];
      });
      if (values.deptIds && values.deptIds.length > 0) {
        values.deptId = values.deptIds[values.deptIds.length - 1];
      }
      dispatch({
        type: values.id ? 'PSystemUser/edit' : 'PSystemUser/add',
        payload: values,
        callback: () => {
          onCancel();
          setTablePayload({...tablePayload});
        },
      });
    });
  }

  /* 取消操作 */
  function onCancel() {
    setDataForm(undefined);
    form.resetFields();
  }

  return (
    <Modal
      confirmLoading={submitting}
      title={dataForm ? dataForm.title : ''}
      open={dataForm ? dataForm.visible : false}
      onOk={onOk}
      onCancel={onCancel}
      forceRender={true}
      width={800}
      className={styles.myModal}
    >
      <Form layout='horizontal' labelCol={{span: 5}} form={form}>
        {dataForm && dataForm.data && (
          <>
            <Form.Item name='id' hidden={true}>
              <Input/>
            </Form.Item>
            <Form.Item name='username' hidden={true}>
              <Input/>
            </Form.Item>
          </>
        )}
        {dataForm && !dataForm.data && (
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name='username' label='登陆账号'
                rules={[
                  {required: true, message: '登陆账号不能为空'},
                ]}>
                <Input placeholder='请输入登陆账号'/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name='password' label='登录密码'
                rules={[
                  {required: true, message: '登录密码不能为空'},
                ]}>
                <Input.Password autoComplete="new-password" placeholder='请输入登录密码'/>
              </Form.Item>
            </Col>
          </Row>
        )}
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name='nickname' label='用户昵称'
              rules={[
                {required: true, message: '用户昵称不能为空'},
              ]}>
              <Input placeholder='请输入用户昵称'/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name='mobile' label='手机号码'
              rules={[
                {required: false, message: '手机号码不能为空'},
              ]}>
              <Input placeholder='请输入手机号码'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name='sex' label='性别'
              rules={[
                {required: true, message: '性别不能为空'},
              ]}
            >
              <Select placeholder='请选择性别'>
                <Select.Option value={0}>未知</Select.Option>
                <Select.Option value={1}>男</Select.Option>
                <Select.Option value={2}>女</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name='status' label='当前状态'
              rules={[
                {required: true, message: '当前状态不能为空'},
              ]}
            >
              <Select placeholder='请选择当前状态'>
                <Select.Option value={1}>正常</Select.Option>
                <Select.Option value={0}>停用</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name='deptIds' label='所属部门'
              rules={[
                {required: false, message: '所属部门不能为空'},
              ]}>
              <Cascader
                placeholder='请选择所属部门' options={deptTree} allowClear
                expandTrigger='hover'
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name='email' label='电子邮箱'
              rules={[
                {required: false, message: '电子邮箱不能为空'},
              ]}>
              <Input placeholder='请输入电子邮箱'/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name='postIds' label='岗位'
              rules={[
                {required: false, message: '岗位不能为空'},
              ]}>
              <Select
                placeholder='请选择岗位' options={postList} mode='multiple'
                maxTagCount={2} allowClear showSearch
                filterOption={(input, option) => (option?.label ?? '').includes(input)}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name='roleIds' label='角色'
              rules={[
                {required: false, message: '角色不能为空'},
              ]}>
              <Select
                placeholder='请选择角色' options={roleList} mode='multiple'
                maxTagCount={2} allowClear showSearch
                filterOption={(input, option) => (option?.label ?? '').includes(input)}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name='remark' label='备注信息'
              rules={[
                {required: false, message: '备注信息不能为空'},
              ]}
            >
              <Input.TextArea rows={3} placeholder='请输入备注信息'/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};


export default connect(({loading, SystemCommon}) => {
  return {
    submitting: loading.effects['PSystemUser/add'] || loading.effects['PSystemUser/edit'],
    postList: SystemCommon.postList,
    roleList: SystemCommon.roleList,
    deptTree: SystemCommon.deptTree,
  };
})(DataForm);

